<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .item {
            margin-left: 10vw;

        }

        .colhead {
            width: 16vw;
            line-height: 6vh;
            float: left;
            text-align: center;
            font-size: 1.1rem;
            color: #FFFFFF;
            background: #2AABD2;
        }

        .colbody {
            width: 16vw;
            line-height: 6vh;
            float: left;
            text-align: center;
            font-size: 1rem;
            border-bottom: 1px solid #dfdfdf;
        }

        .recruithide {
            float: left;
            background: #f6f6f6;
            display: none;
        }

        .recruitterm {
            margin-left: 4vw;
            width: 72vw;
            float: left;
            line-height: 4vh;
            background: inherit;
            border-bottom: 1px solid #dfdfdf;
        }

        .recruitspan {
            margin-right: 4vw;
            font-size: 1rem;
        }

        .recruitgwzz {
            margin-left: 4vw;
        }

        .gangweizhize {
            font-weight: bold;
            line-height: 4vh;
        }

        .recruitgwzz p {
            font-size: 1rem;
        }
    </style>

</head>
<body>

<div>
    <h1>
        这里是一个recruit测试
    </h1>
</div>
<input id="sq" class="ajaxTest" type="button" value="申请"/>
<div id="ajax_test" class="ajax_test"></div>


<div class="item">
    <dl>
        <dt>
            <div class="colhead">招聘部门</div>
            <div class="colhead">招聘职位</div>
            <div class="colhead">工作地点</div>
            <div class="colhead">职位详情</div>
            <div class="colhead">发布日期</div>
        </dt>
        <dd id="recruitDd" style="margin: 0;">

            <!--这里是js自动填充内容开始，以下内容仅做布局参考，删去-->
            <div class="recruitbody">
                <div class="colbody">招聘部门</div>
                <div class="colbody">招聘职位</div>
                <div class="colbody">工作地点</div>
                <div class="colbody"><a>查看详情</a></div>
                <div class="colbody">发布日期</div>
            </div>
            <!--招聘详细信息-->
            <div class="recruithide">
                <div class="recruitterm">
                    <span class="recruitspan">招聘人数：2人</span>
                    <!--<span class="recruitspan">任职要求：本科</span>-->
                    <span class="recruitspan">工作经验：5年以上</span>
                </div>
                <div class="recruitgwzz">
                    <span class="gangweizhize">岗位职责</span>
                    <p>123456<br/>123</p>
                </div>
                <div class="recruitgwzz">
                    <span class="gangweizhize">任职要求</span>
                    <p>123<br/>12345</p>
                </div>
            </div>
            <!--这里填充结束-->

        </dd>
    </dl>
</div>

<script type="text/javascript" src="/js/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {


        $.ajax({
            type: "GET",
            url: "/recruit/getRecruitList",
            contentType: "application/json;charset=utf-8",
            dataType: 'json',
            success: function (data) {
                alert("请求成功！")
                alert(data.datas[0].recruitId);
                for (var i = 0; i < data.datas.length; i++) {
                    var recruiBodyDiv = document.createElement("div");
                    recruiBodyDiv.className = "recruitbody";
                    recruiBodyDiv.innerHTML = "<div class='colbody'>" + data.datas[i].recruitDepart + "</div>" +
                        "<div class='colbody'>" + data.datas[i].recruitPosition + "</div>" +
                        "<div class='colbody'>" + data.datas[i].recruitLocation + "</div>" +
                        "<div class='colbody'><a>查看详情</a></div>" +
                        "<div class='colbody'>" + data.datas[i].recruitTime + "</div>";
                    document.getElementById("recruitDd").appendChild(recruiBodyDiv);

//                    创建隐藏部分
                    var recruitHideDIv = document.createElement("div");
                    recruitHideDIv.className = "recruithide";
                    recruitHideDIv.innerHTML = "<div class='recruitterm'>" +
                        "<span class='recruitspan'>招聘人数：" + data.datas[i].recruitNumber + "人</span>" +
                        "<span class='recruitspan'>工作经验：" + data.datas[i].recruitExperience + "</span>" +
                        "</div>" +
                        "<div class='recruitgwzz'>" +
                        "<span class='gangweizhize'>岗位职责</span>" +
                        "<p>123456<br/>123</p>" +
                        "</div>" +
                        "<div class='recruitgwzz'>" +
                        "<span class='gangweizhize'>任职要求</span>\n" +
                        "<p>123<br/>12345</p>\n" +
                        "</div>";
                    document.getElementById("recruitDd").appendChild(recruitHideDIv);

//                    $(".recruitbody").each(function(){
                        $(".recruitbody").click(function(){
//                            $(this).next(".recruithide").css("display","block");
                            if ($(this).next(".recruithide").css("display") == "none"){
                                $(this).next(".recruithide").css("display","block");
                            }else {
                                $(this).next(".recruithide").css("display", "none");
                            }

//                            $(".recruithide").css("display","none");
//                            $(this).next(".recruithide").css("display","block");
                        });
//                    });
                }
            },
            error: function (res) {
                console.log(res.readyState + "  " + res.responseText);
                alert("请求失败！");
            }
        });

//        var recruitBodyCLick = document.getElementsByClassName("recruitbody");
//        触发点击事件只显示点击的div后面隐藏的div


    });

//    document.getElementsByClassName("recruitbody").onclick = function () {
//        if ($(this).next(".recruithide").css("display") === "none") {
//            $(this).next(".recruithide").css("display", "block");
//        } else {
//            $(this).next(".recruithide").css("display", "none");
//        }
//
//    };
</script>
</body>
</html>